<script setup>
import {ref} from 'vue'

function c() {
  console.log(123)
}

const v = ref(1)

function focusHandler(value, e) {
  console.log(value, e)
}
</script>

<template>
  <!-- 登录页面 -->
  <div class="login-page">
    <div>
      <!-- 登录表单容器 -->
      <div class="login-form-container">
        <!-- 登录标题文字 -->
        <h2 class="login-title-text">登录</h2>
        <!-- 登录表单选择区域 -->
        <ul class="login-form-selector">
          <li>
            <router-link :to="{name: 'loginByPwd'}">密码登录</router-link>
          </li>
          <li>
            <router-link :to="{name: 'loginByEmail'}">邮箱登录</router-link>
          </li>
        </ul>
        <!-- 登录页面登录表单展示区域 -->
        <router-view class="login-form"></router-view>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/*
 * 登录页面
 */
.login-page {
  width: 100%;
  height: calc(100vh - var(--top-nav-height));
  overflow: auto;

  &>div {
    width: 100%;
    min-width: max-content;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*
   * 登录表单容器
   */
  .login-form-container {
    min-width: max-content;
    margin: 1rem;
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--common-bgc);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    /*
     * 登录标题文字
     */
    .login-title-text {
      user-select: none;
      font-size: 2rem;
      font-family: RJTHFH, serif;
    }

    /*
     * 登录表单选择区域
     */
    .login-form-selector {
      margin-top: 1rem;
      user-select: none;
      display: flex;
      justify-content: start;
      align-items: center;

      /*
       * 登录表单选择项
       */
      li {
        border-radius: 0.5rem;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;

        &:hover {
          background-color: var(--common-hover-bgc);

          a {
            color: var(--common-hover-font-color);
          }
        }

        /*
         * router-link
         */
        a {
          position: relative;
          padding: 0.5rem;

          /*
           * 底部边框过渡效果
           */
          &::before {
            position: absolute;
            bottom: 0;
            left: -100%;
            transition: all 0.5s;
            width: calc(100% - 1rem);
            border-bottom: var(--common-active-border-color) 3px solid;
            content: "";
          }
        }

        /*
         * router-link 激活样式
         */
        .router-link-active {

          /*
           * 底部边框过渡效果
           */
          &::before {
            left: 0.5rem;
          }
        }
      }
    }

    /*
     * 登录页面登录表单
     */
    .login-form {
      margin-top: 1rem;
      padding: 0.5rem;
    }
  }
}
</style>